<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html class="x-admin-sm">

<head>
<meta charset="UTF-8">
<title>添加菜单</title>
<%@include file="/WEB-INF/admin/head.jsp"%>
<%@include file="/WEB-INF/admin/common.jsp"%>
</head>

<body>
	<div class="x-body">
		<form class="layui-form">
			<div class="layui-form-item">
				<label for="username" class="layui-form-label"> <span
					class="x-red">*</span>菜单名称
				</label>
				<div class="layui-input-inline">
					<input type="text" id="title" name="title" lay-verify="required"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">选择父菜单</label>
				<div class="layui-input-inline">
					<select lay-filter="pid-select" name="pid"  id ="menuList" >
						<option value="0">一级菜单</option>
					</select>
				</div>
			</div>

			<div class="layui-form-item">
				<label for="username" class="layui-form-label"> <span
					class="x-red">*</span>菜单路径
				</label>
				<div class="layui-input-inline">
					<input type="text" id="username" name="path" lay-verify="required"
						autocomplete="off" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label for="username" class="layui-form-label"> <span
					class="x-red">*</span>菜单图标
				</label>
				<div class="layui-input-inline">
					<input type="text" id="username" name="icon" lay-verify="required"
						autocomplete="off" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label for="username" class="layui-form-label"> <span
					class="x-red">*</span>排序
				</label>
				<div class="layui-input-inline">
					<input type="text" id="username" name="sort" lay-verify="required"
						autocomplete="off" class="layui-input" value="100">
				</div>
			</div>

			<div class="layui-form-item">
				<label for="username" class="layui-form-label"> <span
					class="x-red">*</span>所属模块
				</label>
				<div class="layui-input-inline">
					<select id="shipping" name="module" class="valid">
						<option value="admin">总后台</option>
						<option value="subsite">分站后台</option>
					</select>
				</div>
			</div>

			<div class="layui-form-item">
				<label for="username" class="layui-form-label"> <span
					class="x-red">*</span>菜单类型
				</label>
				<div class="layui-input-inline">
					<select id="shipping" name="type" class="valid">
						<option value="1">主菜单</option>
						<option value="2">普通url</option>
					</select>
				</div>
			</div>

			<div class="layui-form-item">
				<label for="L_repass" class="layui-form-label"> </label>
				<button class="layui-btn" lay-filter="editMeun" lay-submit="submit">
					增加</button>
			</div>
		</form>
	</div>
	<script>
		layui.config({
			base : "${basePath }/js/",
		}).extend({
			authtree: 'authtree',
		}).use([ 'form', 'layer' ,'authtree' ,'laytpl'],function() {				
		var $ = layui.jquery;
		var form = layui.form, layer = layui.layer;
		var authtree = layui.authtree;
		var laytpl = layui.laytpl;
		$.ajax({
            type: "POST",
            url: "${basePath }/admin/menu/listsJson.do",
            contentType: 'application/x-www-form-urlencoded;charset=utf-8',
     
            success: function(res){
            	var data=res.data.menuLists;
            	var trees = authtree.listConvert(data, {
            	    primaryKey: 'id'
            	    ,startPid: 0
            	    ,parentKey: 'pid'
            	    ,nameKey: 'title'
            	    ,valueKey: 'id'
            	    ,checkedKey:["${pid}"*1]
            	});
            	
            	 var selectList = authtree.treeConvertSelect(trees, {
                     childKey: 'list',
                 });
            	 
            	 var string =  laytpl($('#LAY-auth-tree-convert-select').html()).render({
						// 为了 layFilter 的唯一性，使用模板渲染的方式传递
						layFilter: 'LAY-auth-tree-convert-select-input',
						list: selectList,
					});
            	 
            	$("#menuList").append(string);
            	form.render('select');
	        }
		})
		
		//自定义验证规则
		form.verify({
			title : function(value) {
				if (value.length < 5) {
					return '昵称至少得5个字符啊';
				}
			},
			pass : [ /(.+){6,12}$/, '密码必须6到12位' ],
			repass : function(value) {
				if ($('#L_pass').val() != $('#L_repass')
						.val()) {
					return '两次密码不一致';
				}
			}
		});
			//监听提交
			form.on('submit(editMeun)',function(data) {
			//发异步，把数据提交给php
				var requestData = data.field;
				$.ajax({
					type : "POST",
					url : "${basePath }/admin/menu/addMenuSave.do",
					contentType : 'application/x-www-form-urlencoded;charset=utf-8',
					data : requestData,
					success : function(res) {
						if (res.code == 0) {
							layer.alert("修改成功",{icon : 6},function() {
								// 获得frame索引
								var index = parent.layer.getFrameIndex(window.name);
								//关闭当前frame
								parent.layer.close(index);
							});
						}else{
							layer.alert(res.msg,{icon : 1});
						}
					}
				})
				return false;
			});

	});
	</script>
	<!-- 树转单选树的DOM -->
	<script type="text/html" id="LAY-auth-tree-convert-select">
	{{# layui.each(d.list, function(index, item) { }}
		<option value="{{item.value}}" {{item.checked?'selected':''}} {{item.disabled?'disabled':''}}>{{item.name}}</option>
	{{# });}}
	</script>
	
</body>

</html>